<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>回收报表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <style>
        .layui-quote-err {
            border-left: 5px solid #FF5722;
            background-color: #FCF8E3;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <blockquote class="layui-elem-quote layui-quote-err">某日期<span style="color:red;">注册用户</span>的后续30天的回收</blockquote>

        <div class="layui-form" style="margin-left: 15px;padding-top: 25px;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    {volist name="dimensions" key="k" id="v"}
                    <input type="radio" name="dimensions" lay-skin="primary" value="{$k}" title="{$v}" {if $k == 1}checked{/if} lay-filter="dimensions" />
                    {/volist}
                </div>
            </div>
        </div>


        <div lay-filter="listSearch" class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">

                <div class="layui-inline">
                    <select name="advert_media_id">
                        <option value="0">请选择投放媒体</option>
                        {volist name="advert_medias" key="k" id="v"}
                        <option value="{$k}">{$v}</option>
                        {/volist}
                    </select>
                </div>

                {neq name="role_name" value="channel"}
                <div class="layui-inline">
                    <select name="channel_id" lay-search>
                        <option value="0">请选择投放号</option>
                        {volist name="channels" id="v"}
                        <option value="{$v.id}">{$v.account}</option>
                        {/volist}
                    </select>
                </div>
                {/neq}

                <div class="layui-inline">
                    <input type="text" id="dayStart" name="start_date" placeholder="请输入起始日期" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-inline">
                    <input type="text" id="dayEnd" name="end_date" placeholder="请输入截止日期" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-list-front-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="LAY-reset">重置</button>
                </div>

            </div>

        </div>



        <div class="layui-card-body">

            <div style="margin-bottom: 20px">
                <table class="layui-table" lay-data="{ page: false}" lay-filter="LAY-total-manage">
                    <thead>
                    <tr>
                        <th lay-data="{field:'summary_title', width:150,align: 'center'}" >数据汇总</th>
                        <th lay-data="{field:'new_fan_num', width:150,align: 'center'}">注册用户</th>
                        <th lay-data="{field:'total_cost', width:150,align: 'center'}" >总成本</th>
                        <th lay-data="{field:'new_fan_recharge', width:150,align: 'center'}" >新粉充值</th>
                        <th lay-data="{field:'accumulated_recharge', width:150,align: 'center'}" >累计充值</th>
                        <th lay-data="{field:'accumulated_recovery_rate', width:150,align: 'center'}">累计回收率</th>
                        <th lay-data="{field:'first_roi', width:150,align: 'center'}">首日ROI</th>
                        <th lay-data="{field:'fan_unit_price', width:150,align: 'center'}">粉丝单价</th>
                        <th lay-data="{field:'pay_new_fan_num', width:150,align: 'center'}">付费新粉数</th>
                        <th lay-data="{field:'pay_new_fan_unit_price', width:150,align: 'center'}">付费新粉单价</th>
                        <th lay-data="{field:'accumulated_order_num', width:150,align: 'center'}" >累计订单数</th>
                        <th lay-data="{field:'first_order_unit_price', width:150,align: 'center'}">首日订单单价</th>
                        <th lay-data="{field:'new_fan_pay_rate', width:150,align: 'center'}">新粉付费率</th>
                        <th lay-data="{field:'new_fan_arpu', width:150,align: 'center'}" >新粉ARPU</th>
                        <!--<th lay-data="{field:'total_fan_num', width:150,align: 'center'}" >总粉丝数</th>
                        <th lay-data="{field:'new_fan_proportion', width:150,align: 'center'}" >新粉占比</th>
                        <th lay-data="{field:'shielded_area_fan_proportion', width:150,align: 'center'}" >屏蔽粉占比</th>-->
                        <th lay-data="{field:'pay_total_fan_num', width:150,align: 'center'}" >累计付费粉数</th>
                        <th lay-data="{field:'accumulated_pay_fan_unit_price', width:150,align: 'center'}" >累计付费粉单价</th>
                        <th lay-data="{field:'first_order_num', width:150,align: 'center'}" >首日订单数</th>
                        <th lay-data="{field:'accumulated_order_unit_price', width:150,align: 'center'}" >累计订单单价</th>
                        <th lay-data="{field:'first_annual_recharge', width:150,align: 'center'}" >首日年费充值</th>
                        <th lay-data="{field:'first_annual_proportion', width:150,align: 'center'}" >首日年费占比</th>
                    </tr>


                    </thead>
                </table>
            </div>

            <table id="LAY-list-manage" lay-filter="LAY-list-manage"></table>

        </div>
    </div>
</div>

<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    var cols1 = [[
        {field: 'report_date', width: 150, title: '日期', align:'center',rowspan:2,fixed:'left'}
        ,{field: 'day', title: '天数',width:150, align:'center',rowspan:2,fixed:'left'}
        ,{field: 'media_name', title: '媒体', align:'center',width:150,rowspan:2,fixed:'left'}
        ,{field: 'quick_name', title: 'App', align:'center',width:150,rowspan:2,fixed:'left'}
        ,{field: 'new_fan_num', title: '新增粉丝数', align:'center',width:150,rowspan:2}
        ,{field: 'total_cost', title: '总成本', align:'center',width:150,rowspan:2}
        ,{field: 'new_fan_recharge', title: '新粉充值', align:'center',width:150,rowspan:2}
        ,{field: 'accumulated_recharge', title: '累计充值', align:'center',width:150,rowspan:2}
        ,{field: 'accumulated_recovery_rate', title: '累计回收率', align:'center',width:150,rowspan:2}
        ,{field: 'first_roi', title: '首日ROI', align:'center',width:150,rowspan:2}
        ,{field: 'fan_unit_price', title: '粉丝单价', align:'center',width:150,rowspan:2}
        ,{field: 'pay_new_fan_num', title: '付费新粉数', align:'center',width:150,rowspan:2}
        ,{field: 'pay_new_fan_unit_price', title: '付费新粉单价', align:'center',width:150,rowspan:2}
        ,{field: 'accumulated_order_num', title: '累计订单数', align:'center',width:150,rowspan:2}
        ,{field: 'first_order_unit_price', title: '首日订单单价', align:'center',width:150,rowspan:2}
        ,{field: 'new_fan_pay_rate', title: '新粉付费率', align:'center',width:150,rowspan:2}
        ,{field: 'new_fan_arpu', title: '新粉ARPU', align:'center',width:150,rowspan:2}
       /* ,{field: 'total_fan_num', title: '总粉丝数', align:'center',width:150,rowspan:2}
        ,{field: 'new_fan_proportion', title: '新粉占比', align:'center',width:150,rowspan:2}
        ,{field: 'shielded_area_fan_proportion', title: '屏蔽粉占比', align:'center',width:150,rowspan:2}*/
        ,{field: 'pay_total_fan_num', title: '累计付费粉数', align:'center',width:150,rowspan:2}
        ,{field: 'accumulated_pay_fan_unit_price', title: '累计付费粉单价', align:'center',width:150,rowspan:2}
        ,{field: 'first_order_num', title: '首日订单数', align:'center',width:150,rowspan:2}
        ,{field: 'accumulated_order_unit_price', title: '累计订单单价', align:'center',width:150,rowspan:2}
        ,{field: 'first_annual_recharge', title: '首日年费充值', align:'center',width:150,rowspan:2}
        ,{field: 'first_annual_proportion', title: '首日年费占比', align:'center',width:150,rowspan:2}
        ,{field: '', title: '1日', align:'center',colspan:2}
        ,{field: '', title: '2日', align:'center',colspan:2}
        ,{field: '', title: '3日', align:'center',colspan:2}
        ,{field: '', title: '4日', align:'center',colspan:2}
        ,{field: '', title: '5日', align:'center',colspan:2}
        ,{field: '', title: '6日', align:'center',colspan:2}
        ,{field: '', title: '7日', align:'center',colspan:2}
        ,{field: '', title: '8日', align:'center',colspan:2}
        ,{field: '', title: '9日', align:'center',colspan:2}
        ,{field: '', title: '10日', align:'center',colspan:2}
        ,{field: '', title: '11日', align:'center',colspan:2}
        ,{field: '', title: '12日', align:'center',colspan:2}
        ,{field: '', title: '13日', align:'center',colspan:2}
        ,{field: '', title: '14日', align:'center',colspan:2}
        ,{field: '', title: '15日', align:'center',colspan:2}
        ,{field: '', title: '16日', align:'center',colspan:2}
        ,{field: '', title: '17日', align:'center',colspan:2}
        ,{field: '', title: '18日', align:'center',colspan:2}
        ,{field: '', title: '19日', align:'center',colspan:2}
        ,{field: '', title: '20日', align:'center',colspan:2}
        ,{field: '', title: '21日', align:'center',colspan:2}
        ,{field: '', title: '22日', align:'center',colspan:2}
        ,{field: '', title: '23日', align:'center',colspan:2}
        ,{field: '', title: '24日', align:'center',colspan:2}
        ,{field: '', title: '25日', align:'center',colspan:2}
        ,{field: '', title: '26日', align:'center',colspan:2}
        ,{field: '', title: '27日', align:'center',colspan:2}
        ,{field: '', title: '28日', align:'center',colspan:2}
        ,{field: '', title: '29日', align:'center',colspan:2}
        ,{field: '', title: '30日', align:'center',colspan:2}

    ]
        ,[
            {field: 'rate_recovery_1', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_1', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_2', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_2', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_3', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_3', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_4', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_4', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_5', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_5', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_6', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_6', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_7', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_7', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_8', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_8', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_9', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_9', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_10', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_10', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_11', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_11', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_12', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_12', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_13', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_13', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_14', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_14', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_15', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_15', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_16', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_16', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_17', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_17', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_18', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_18', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_19', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_19', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_20', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_20', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_21', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_21', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_22', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_22', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_23', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_23', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_24', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_24', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_25', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_25', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_26', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_26', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_27', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_27', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_28', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_28', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_29', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_29', title: '充值', width: 120,align:'center'}
            ,{field: 'rate_recovery_30', title: '回收率', width: 100,align:'center'}
            ,{field: 'increase_30', title: '充值', width: 120,align:'center'}
        ]];
</script>
<script>

    layui.use('laydate', function () {
        var $ = layui.$;
        var laydate = layui.laydate;

        var nowTime = new Date().valueOf();
        var start = laydate.render({
            elem: '#dayStart',
            type: 'date',
            max: nowTime,
            done: function (value, date) {
                endMax = end.config.max;
                end.config.min = date;
                end.config.min.month = date.month - 1;
            }
        });
        var end = laydate.render({
            elem: '#dayEnd',
            type: 'date',
            max: nowTime,
            done: function (value, date) {
                if ($.trim(value) == '') {
                    var curDate = new Date();
                    date = {
                        'date': curDate.getDate(),
                        'month': curDate.getMonth() + 1,
                        'year': curDate.getFullYear()
                    };
                }
                start.config.max = date;
                start.config.max.month = date.month - 1;
            }
        });
    });

    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table','admin'], function(){
        var $ = layui.$
            ,form = layui.form
            ,admin = layui.admin
            ,table = layui.table;

        var dimensions = [];
        var advert_media_id = 0;
        var channel_id = 0;
        var link_id = "";
        var nid_bookname = "";
        var start_date = "";
        var end_date = "";

        form.on('radio(dimensions)', function(data){
            dimensions = [data.value];
            var dimensions_data = $.makeArray(dimensions).join(",");

            var checkIndex1 = $.inArray('1',dimensions);
            var checkIndex2 = $.inArray('2',dimensions);
            var checkIndex3 = $.inArray('3',dimensions);
            var checkIndex4 = $.inArray('4',dimensions);
            var checkIndex5 = $.inArray('5',dimensions);

            var mediaSelect = $('select[name="advert_media_id"]');
            console.log(mediaSelect);

            if (checkIndex1 != -1) {
                cols1[0][2].hide = true;
                cols1[0][3].hide = true;
                cols1[0][4].hide = true;
                cols1[0][5].hide = true;
                mediaSelect.parent().show();
            }

            if (checkIndex2 != -1) {
                cols1[0][2].hide = false;
                mediaSelect.parent().show();
            }else{
                cols1[0][2].hide = true;
            }
            if (checkIndex3 != -1) {
                cols1[0][3].hide = false;
                mediaSelect.val('');
                mediaSelect.parent().hide();
            }else{
                cols1[0][3].hide = true;
            }
            if (checkIndex4 != -1) {
                cols1[0][4].hide = false;
                mediaSelect.val('');
                mediaSelect.parent().hide();
            }else{
                cols1[0][4].hide = true;
            }
            if (checkIndex5 != -1) {
                mediaSelect.val('')
                mediaSelect.parent().hide();
                cols1[0][5].hide = false;
            }else{
                cols1[0][5].hide = true;
            }

            form.render();

            table.reload('LAY-list-manage', {
                where: {"start_date":start_date,"end_date":end_date,"advert_media_id": advert_media_id,"channel_id": channel_id,"dimension":dimensions_data}
                ,cols: cols1
                ,page: {
                    curr: 1  // 将页码重置为第一页
                }
            });

            table.init('LAY-total-manage', {
                url: "/advert_statistics/recycling_report_data?is_total=1&start_date="+start_date+"&end_date="+end_date+"&advert_media_id="+advert_media_id+"&channel_id="+channel_id+"&dimension="+dimensions
            });
        });


        form.on('submit(LAY-list-front-search)', function(data){
            var field = data.field;

            advert_media_id = field.advert_media_id;
            channel_id      = field.channel_id;
            start_date      = field.start_date;
            end_date        = field.end_date;

            var length_screen = 0;

            if(advert_media_id>= 1)
            {
                length_screen++;
            }
            if(length_screen > 1)
            {
                layer.msg('推广链接ID、小说ID或书名、投放媒体三个条件只能选择一个');
                return false;
            }

            //执行重载
            var dimensions_data = $.makeArray(dimensions).join(",");

            if(length_screen >= 1) {

                if (dimensions_data == 2 && advert_media_id < 1) {
                    layer.msg('上方筛选条件请勿输入推广链接ID、小说ID或书名');
                    return false;
                }
                if (dimensions_data == 5) {
                    layer.msg('上方筛选条件请勿输入小说ID或书名、投放媒体、推广链接ID2');
                    return false;
                }
            }

            var checkIndex1 = $.inArray('1',dimensions);
            var checkIndex2 = $.inArray('2',dimensions);
            var checkIndex3 = $.inArray('3',dimensions);
            var checkIndex4 = $.inArray('4',dimensions);
            var checkIndex5 = $.inArray('5',dimensions);

            if (checkIndex1 != -1) {
                cols1[0][2].hide = true;
                cols1[0][3].hide = true;
                cols1[0][4].hide = true;
                cols1[0][5].hide = true;
            }

            if (checkIndex2 != -1) {

                cols1[0][2].hide = false;
            }else{
                cols1[0][2].hide = true;
            }
            if (checkIndex3 != -1) {
                cols1[0][3].hide = false;
            }else{
                cols1[0][3].hide = true;
            }
            if (checkIndex4 != -1) {
                cols1[0][4].hide = false;
            }else{
                cols1[0][4].hide = true;
            }
            if (checkIndex5 != -1) {
                cols1[0][5].hide = false;
            }else{
                cols1[0][5].hide = true;
            }

            table.reload('LAY-list-manage', {
                where: {"start_date":start_date,"end_date":end_date,"advert_media_id": advert_media_id,"channel_id": channel_id,"dimension":dimensions_data}
                ,page: {
                    curr: 1  // 将页码重置为第一页
                }
            });

            table.init('LAY-total-manage', {
                url: "/advert_statistics/recycling_report_data?is_total=1&start_date="+start_date+"&end_date="+end_date+"&advert_media_id="+advert_media_id+"&channel_id="+channel_id+"&dimension="+dimensions
            });
        });


        form.on('submit(LAY-reset)', function(data){
            var field = data.field;
            form.val("listSearch", {
                "advert_media_id": "0",
                "channel_id": "0",
                "dimension" : "",
                "start_date": "",
                "end_date": ""
            });

            advert_media_id = 0;
            channel_id      = 0;
            start_date      = '';
            end_date        = '';

            $('input[name="dimensions"]').prop('checked', false);

            form.render();
            dimensions = [];

            console.log(dimensions);
            var checkIndex1 = $.inArray('1',dimensions);
            var checkIndex2 = $.inArray('2',dimensions);
            var checkIndex3 = $.inArray('3',dimensions);
            var checkIndex4 = $.inArray('4',dimensions);
            console.log(checkIndex1);
            if (checkIndex1 != -1) {

                cols1[0][2].hide = false;
            }else{
                cols1[0][2].hide = true;
            }
            if (checkIndex2 != -1) {
                cols1[0][3].hide = false;
            }else{
                cols1[0][3].hide = true;
            }
            if (checkIndex3 != -1) {
                cols1[0][4].hide = false;
            }else{
                cols1[0][4].hide = true;
            }
            if (checkIndex4 != -1) {
                cols1[0][5].hide = false;
            }else{
                cols1[0][5].hide = true;
            }

            table.reload('LAY-list-manage', {
                where: {"advert_media_id": "0","channel_id": "0","dimension":"","start_date": "","end_date": ""}
                ,cols: cols1
                ,page: {
                    curr: 1  // 将页码重置为第一页
                }
            });

            table.init('LAY-total-manage', {
                url: "/advert_statistics/recycling_report_data?is_total=1&start_date=&end_date=&advert_media_id=0&channel_id=0&dimension="
                ,page: {
                    curr: 1  // 将页码重置为第一页
                }
            });
        });

        cols1[0][2].hide = true;
        cols1[0][3].hide = true;
        cols1[0][4].hide = true;
        cols1[0][5].hide = true;
        table.render({
            elem: '#LAY-list-manage'
            ,url: "{:url('advert_statistics/recycling_report_data')}" //模拟接口
            ,autoSort: false
            ,cols: cols1
            ,page: true
            ,limit: 10
            ,width: '100%'
        });

        table.init('LAY-total-manage', {
            url: "/advert_statistics/recycling_report_data?is_total=1"
        });

    });
</script>
</body>
</html>